<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2022-12-21
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>商品详情</title>
    <style>
        .father {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <h1 style="text-align: center;">商品详情</h1>
    <input type="hidden" name="assessId" value="${detail.cid}">
    <table class="table table-striped table-bordered .table-hover">
        <tbody>
        <tr>
            <td>商品名称</td>
            <td>${detail.cname}</td>
            <td>分类</td>
            <td>${detail.className.className}</td>
        </tr>
        <tr>
            <td>品牌</td>
            <td>${detail.brand.brandName}</td>
            <td>型号</td>
            <td>${detail.typeName}</td>
        </tr>
        <tr>
            <td>单价</td>
            <td>${detail.price}</td>
            <td>库存</td>
            <td>${detail.num}</td>
        </tr>
        <tr>
            <td colspan="4"><a href="javaScript:void(0)" onclick="showOrHiden()">显示评论</a></td>
        </tr>
        </tbody>
        <tfoot id="foot">
        <%-- 评论--%>
        <tr>
            <td>序号</td>
            <td>评论内容</td>
            <td>评论类型</td>
            <td>评论人</td>
        </tr>
        </tfoot>
    </table>
</div>

</body>
</html>
<script>
    onload = function () {
        loadAssess();
        $('#foot').css('display','none');
    }

    function loadAssess() {
        var assessId = $(`input[name='assessId']`).val();
        var i=0;
        $.getJSON(`api/assess/` + assessId + ``, function (assessList) {
            $(assessList).each(function () {
                i++;
                $("#foot").append(` <tr>
            <td>`+i+`</td>
            <td>`+this.assessContent+`</td>
            <td>`+this.assessType+`</td>
            <td>`+this.assesser+`</td>
        </tr>
`)
            })
        })
    }

    function showOrHiden(){
        $('#foot').fadeToggle();
    }
</script>
